<template>
    <div class="w_h_100">
        <div class="forms">
            <div class="w_100 headTips m_t_20">
                <div class="d_f a_i_c">
                    <div class="line"></div>
                    业务资料
                </div>
            </div>
            <el-button type="primary" plain class="m_t_10" v-if="length > 0" @click="downloadFile">批次客户资料包下载</el-button>
            <mytable :fields="busFields" width="110" :isHight="false" api="businessDataPage" ref="tableRef"
                class="m_t_10" :isSelection="false" :values="values" @init="init">
                <template v-slot:operation="{ row }">
                    <div class="d_f j_c_s_b">
                        <span class="success" @click="preview(row)">预览</span>
                    </div>
                </template>
            </mytable>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'
import { downloadBusinessData } from '../../api/agent'
import { useRoute, useRouter } from 'vue-router'
import { Message } from '../../utils/resetMessage'
import {businessInformationType} from './data'
export default defineComponent({
    name: '',
    setup() {
        const data:businessInformationType = reactive({
            busFields: [
                {
                    label: '文件名称',
                    prop: 'businessDataName',
                    width: '300px',
                },
                {
                    label: '上传任务环节',
                    prop: 'nodeName',
                    width: '300px',
                },
                {
                    label: '上传人',
                    prop: 'uploadName',
                    width: '100px',
                },
                {
                    label: '上传时间',
                    prop: 'uploadTime',
                    width: '200px',
                },
            ],
            values: {
                projectId: '',
                flowInstId: "",
            },
            length: 0
        })
        const route = useRoute()
        const router = useRouter()
        onBeforeMount(() => {
            data.values.projectId = route.query.projectId as string
            data.values.flowInstId = route.query.flowInstId as string
        })
        const methods = {

            detail(item) {
                localStorage.setItem('item', JSON.stringify(item))
                router.push('/service/singleFinancing/form')
            },
            init(res: any) {
                data.length = res.records.length
            },
            //预览文件
            preview(row: any) {
                window.open(row.fileUrl, '_blank')
            },
            downloadFile(){
                downloadBusinessData(data.values).then((res:any)=>{
                    window.open(res.url, '_blank')
                    Message({type:"success",message:'请求成功'})
                })
            }
        }
        return {
            ...toRefs(data), ...methods
        }
    }
})
</script>
<style scoped lang='scss'>
.forms {
    width: calc(100% - 64px);
    height: calc(100% - 80px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);

    padding: 1px 32px 24px 32px;
    overflow-y: auto;
}

.bottom {
    background: #fff;
    padding: 32px;
    width: calc(100% - 64px);
}
</style>